import React, { useEffect, useState } from "react";
import { Modal, Radio } from "antd";
import Login from "./components/Login";
import Register from "./components/Register";
export default function LoginForm(props) {
  const [chooseValue, setChooseValue] = useState("login");

  const handleModalClose = () => {
    props.onClose();
  };

  const options = [
    {
      label: "登录",
      value: "login",
    },
    {
      label: "注册",
      value: "register",
    },
  ];

  useEffect(() => {}, [props.isModalOpen]);

  return (
    <Modal
      title="登录/注册"
      open={props.isModalOpen}
      onOk={handleModalClose}
      onCancel={handleModalClose}
    >
      <Radio.Group
        block
        options={options}
        defaultValue="login"
        optionType="button"
        buttonStyle="solid"
        onChange={(e) => setChooseValue(e.target.value)}
      />
      {/* 根据切换的内容，渲染不同的组件 */}
      {chooseValue === "login" ? (
        <Login isModalOpen={props.isModalOpen} onClose={handleModalClose} />
      ) : (
        <Register isModalOpen={props.isModalOpen} onClose={handleModalClose} />
      )}
    </Modal>
  );
}
